<script>
import dateUtils from "@/utils/dateUtils"
import { valIsEmpty } from "@/utils"

export default {
  name: "datePicker",
  data() {
    return {
      yearList: dateUtils.getPrevious20Years().map((item) => {
				return {
					label: item + "年",
					value: item,
				}
			}),
      monthList: [
        {
          label: "不限",
          value: "",
        },
        {
          label: "1月",
          value: "1",
        },
        {
          label: "2月",
          value: "2",
        },
        {
          label: "3月",
          value: "3",
        },
        {
          label: "4月",
          value: "4",
        },
        {
          label: "5月",
          value: "5",
        },
        {
          label: "6月",
          value: "6",
        },
        {
          label: "7月",
          value: "7",
        },
        {
          label: "8月",
          value: "8",
        },
        {
          label: "9月",
          value: "9",
        },
        {
          label: "10月",
          value: "10",
        },
        {
          label: "11月",
          value: "11",
        },
        {
          label: "12月",
          value: "12",
        },
      ],
      value: [0, 0],
    }
  },
  computed: {
    currentSelectYear() {
      return this.yearList[this.value[0]].value
    },
    currentSelectMonth() {
      return this.monthList[this.value[1]].value
    },
  },
  methods: {
    valIsEmpty,
    open() {
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    confirm() {
      this.close()
      this.$emit("confirm", {
        year: this.currentSelectYear,
        month: this.currentSelectMonth,
      })
    },
  },
  emits: ["confirm"],
}
</script>

<template>
  <view class="component">
    <uni-popup ref="popup" type="bottom">
      <view class="popup-content">
        <view class="header">
          <view class="cancel-btn btn" @click="close">取消</view>
          <view class="title">选择年份和月份</view>
          <view class="confirm-btn btn" @click="confirm">确定</view>
        </view>

        <view class="content">
          <view class="current-selection" v-if="!valIsEmpty(currentSelectYear) || !valIsEmpty(currentSelectMonth)">
            <text>当前选择：</text>
            <text class="date">{{ currentSelectYear }}</text>
            <text class="date">年</text>
            <template v-if="!valIsEmpty(currentSelectMonth)">
              <text class="date">{{ currentSelectMonth }}</text>
              <text class="date">月</text>
            </template>
          </view>

          <picker-view
            style="height: 40vh; width: 100%"
            :value="value"
            @change="
              (event) => {
								value = event.detail.value
              }
            "
          >
            <!--					年份-->
            <picker-view-column class="picker-view-column">
              <view v-for="year in yearList" :key="year.value">{{ year.label }}</view>
            </picker-view-column>
            <!--					月份-->
            <picker-view-column class="picker-view-column" :disabled="!valIsEmpty(value[0])">
              <view v-for="month in monthList" :key="month.value">{{ month.label }}</view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
.popup-content {
  background: white;
  border-radius: 30rpx;
  padding-bottom: 30rpx;

  > .header {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > .btn {
      font-size: 30rpx;
      padding: 10rpx 30rpx;
      border-radius: 32rpx;
    }
    > .cancel-btn {
      border: 2rpx solid #d7eee7;
    }
    > .confirm-btn {
      background: var(--theme-color);
      color: white;
    }
    > .title {
      font-size: 32rpx;
    }
  }

  > .content {
    padding: 0 30rpx;
    > .current-selection {
      margin-bottom: 20rpx;
      font-size: 30rpx;
      .date {
        font-weight: bold;
        color: var(--theme-color);
      }
    }
    .picker-view-column {
      text-align: center;
    }
  }
}
</style>
